<template>
  <comPopover class="flex-col com-user-info" @close="onClickOutClose" v-if="userInfo">
    <div
      class="flex-row user-card"
      :style="
        userInfo.role_name === '超级管理员'
          ? 'background: linear-gradient(141deg, #485f7a 0%, #181e28 100%)'
          : userInfo.role_name === '单位管理员'
          ? 'background: linear-gradient(141deg, #56A6EF 0%, #0A4C94 100%);'
          : 'background: #09253F;'
      "
    >
      <img v-if="userInfo.avatar_url" @click="toMyCenter" :src="userInfo.avatar_url" alt="" class="user-icon" />
      <img v-else @click="toMyCenter" src="@/assets/img/home/avatar.png" alt="" class="user-icon" />
      <div class="flex-col user-info">
        <div class="user-name">{{ userInfo.name }}</div>
        <div
          :class="
            userInfo.role_name === '超级管理员'
              ? 'user-sup'
              : userInfo.role_name === '单位管理员'
              ? 'user-com'
              : 'user-peo'
          "
        >
          {{ userInfo.role_name }}
        </div>
      </div>
      <img
        src="@/assets/img/home/icon_black.png"
        alt=""
        class="user-apply"
        @click="toApplyManage"
        v-if="userInfo.role_name === '超级管理员'"
      />
    </div>
    <div class="flex-col operation-list">
      <div class="user-operation" @click="toMyCenter">
        <img src="@/assets/img/home/icon_1.png" alt="" />
        个人中心
      </div>
      <div
        class="user-operation"
        @click="toApplyManage"
        v-if="userInfo.role_name === '超级管理员' || userInfo.role_name === '单位管理员'"
      >
        <img src="@/assets/img/home/icon_2.png" alt="" />后台管理
      </div>
      <div class="user-operation" @click="toLogout"><img src="@/assets/img/home/icon_3.png" alt="" />退出登录</div>
    </div>
  </comPopover>
</template>
<script lang="ts" setup>
import {ref, onMounted} from 'vue';
import comPopover from '@/components/comPopover/comPopover.vue';
import router from '@/router';
import store from '@/store';
import personalApi from '@/api/personalApi.ts';

const userInfo = ref(null);
// 基本交互定位
const emit = defineEmits(['close']);
const toMyCenter = () => {
  router.push('/myInfo');
  emit('close');
};
const toApplyManage = () => {
  router.push('/applyManage');
  emit('close');
};
const toLogout = () => {
  store.dispatch('logOut');
  emit('close');
};
const onClickOutClose = () => {
  emit('close');
};
// 用户信息获取
const getInfo = () => {
  personalApi
    .getUserInfo()
    .then((res) => {
      userInfo.value = res.data;
    })
    .catch((err) => {
      throw err;
    });
};
onMounted(() => {
  getInfo();
});
</script>

<style lang="scss" scoped>
.com-user-info {
  width: 302px;
  min-height: 231px;
  background: #001528;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  z-index: 999999;
  box-sizing: border-box;
  padding: 13px 0 24px;
  justify-content: space-between;
  align-items: center;
}
* {
  cursor: default;
}
.user-card {
  width: 275px;
  height: 90px;
  margin-bottom: 23px;
  background: #09253f;
  border-radius: 4px;
  align-items: center;
  padding: 20px 15px;
  box-sizing: border-box;

  .user-icon {
    width: 53px;
    height: 53px;
    margin-right: 15px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .user-name {
    font-size: 16px;
    color: #f1f3f5;
    font-weight: bold;
  }
  .card-sup {
    background: linear-gradient(141deg, #485f7a 0%, #181e28 100%) !important;
  }
  .user-sup {
    color: #1a140c;
    font-size: 10px;
    background: url(@/assets/img/home/icon_sup.png) no-repeat;
    border-radius: 0px 100px 100px 0px;
    padding-left: 25px;
    line-height: 25px;
    font-weight: bold;
    box-sizing: border-box;
    width: 125px;
    height: 25px;
  }
  .user-com {
    color: #1a140c;
    font-size: 10px;
    background: url(@/assets/img/home/icon_vip.png) no-repeat;
    border-radius: 0px 100px 100px 0px;
    padding-left: 25px;
    line-height: 25px;
    font-weight: bold;
    box-sizing: border-box;
    color: #ce7600;
    width: 125px;
    height: 25px;
  }
  .user-peo {
    width: 75px;
    height: 20px;
    background: #3a5065;
    border-radius: 100px;
    // opacity: 0.2;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    color: #fff;
  }
  .user-apply {
    color: #1a140c;
    font-size: 10px;
    width: 34px;
    height: 34px;
    align-self: flex-end;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
  }
  .user-info {
    flex: 1;
    height: 53px;
    justify-content: space-evenly;
    > img {
      width: 79px;
      height: 20px;
    }
  }
}
.user-operation {
  height: 40px;
  line-height: 40px;
  width: 288px;
  cursor: pointer;
  box-sizing: border-box;
  padding: 0 20px;
  display: flex;
  align-items: center;
  > img {
    margin-right: 19px;
  }
  &:hover {
    background: #317be2;
  }
}
</style>
